import { detailConfig } from '@/views/datacenter/business/elderlyInstitutionsRating/config'
import { getAreaObj } from '@/utils/util'
import RateXing from '@/views/aplid/DetailPage/ContentListItem/RateXing/index.vue'
import './style.css'

export default defineComponent({
	setup(props) {
		const crud = ref()
		const baseConfig = {
			pageName: '机构等级评定档案',
			rowKey: 'id',
			api: {
				index: 'dpOrgLevelEvaluate_page',
			},
			auth: {
				index: 'view_dpOrgLevelEvaluate_page',
			},
			menuBtn: [
				{
					icon: 'editor',
					label: '查看档案',
					type: 'primary',
					operate: 'detail',
					auth: '',
					text: true,
					show: true,
				},
			],
			onLoadFormate: async (arr) => {
				const tableData = arr.map((item) => {
					const areas_name = getAreaObj(item, 'belong')
					return {
						...item,
						areas_name,
					}
				})
				console.log(tableData, 'tableData')
				return Promise.resolve(Object.freeze(tableData))
			},
		}

		const tableConfig = {
			stripe: true,
			border: true,
			maxHeight: '80vh',
			columns: [
				{
					type: 'expand',
					render: ({ row }) => {
						let total = 0
						const totalData = [row.environment, row.facilityEquipment, row.operateEquipment, row.service].filter(Boolean)
						if (totalData.length > 0) {
							total = totalData.reduce((a, b) => parseFloat(a) + parseFloat(b))
						}
						const getRatio = (val = 0) => {
							return ((val / total) * 100).toFixed(2)
						}
						return (
							<div style="padding-left:20px; margin: 0 auto;">
								<el-row style="margin-bottom:10px">
									<el-col span={3} class="label_part">等级评定星级:</el-col>
									<el-col span={8}>
									<RateXing  model={row} item={{'prop':'ultimatelyLevel','propName':'ultimatelyLevelLabel'}}></RateXing>
									</el-col>
								</el-row>
								<el-row style="margin-bottom:10px">
									<el-col span={3} class="label_part">现场评定总分:</el-col>
									<el-col span={8} class="left_right">
									    <span class="blob_text_part">{total}</span>分
										<div class="flex align-center" style='margin-left:20px'>
											<el-button size="small" onClick={() => handleShowDetail(row)}>
												点击查看评定明细
											</el-button>
										</div>
									</el-col>
								</el-row>
								<el-row style="margin-bottom:10px">
									<el-col span={3} class="label_part">环境总分:</el-col>
									<el-col span={8}>
									<span class="blob_text_part">{row.environment}</span>分 得分占比 <span class="blob_text_part">{getRatio(row.environment)}%</span>
									</el-col>
								</el-row>
								<el-row style="margin-bottom:10px">
									<el-col span={3} class="label_part">设施设备总分:</el-col>
									<el-col span={8}>
									<span class="blob_text_part">{row.facilityEquipment}</span>分 得分占比 <span class="blob_text_part">{getRatio(row.facilityEquipment)}%</span>
									</el-col>
								</el-row>
								<el-row style="margin-bottom:10px">
									<el-col span={3} class="label_part">运营设备总分:</el-col>
									<el-col span={8}>
									<span class="blob_text_part">{row.operateEquipment}</span>分 得分占比 <span class="blob_text_part">{getRatio(row.operateEquipment)}%</span>
									</el-col>
								</el-row>
								<el-row style="margin-bottom:10px">
									<el-col span={3} class="label_part">服务总分:</el-col>
									<el-col span={8}>
									<span class="blob_text_part">{row.service}</span>分 得分占比 <span class="blob_text_part">{getRatio(row.service)}%</span>
									</el-col>
								</el-row>
								
							</div>
						)
					},
				},
				{ label: '评定人员', prop: 'evaluateStaff' },
				{ label: '评定单位', prop: 'evaluateUnit' },
				{
					label: '评定时间',
					prop: 'createTime',
				},
				{ label: '评定结果', prop: 'ultimatelyLevelLabel' },
				{ label: '数据来源', prop: 'dateSource' },
			],
		}

		const handleShowDetail = (row) => {
			nextTick(() => {
				crud.value.handleOperate('detail', row, '详情')
			})
		}
		
		return () => (
			<aplid-base-crud
				ref={crud}
				api={baseConfig.api}
				paramsObj={{isWithAuth:0}}
				pageName={baseConfig.pageName}
				rowKey={baseConfig.rowKey}
				auth={baseConfig.auth}
				onLoadFormate={baseConfig.onLoadFormate}
				detailConfig={detailConfig}
				tableConfig={tableConfig}
			/>
		)
	},
})
